<template>
  <drop-wrap :data="data" :index="index" :element="element">
    <div
      :class="[
        'blank-container',
      ]"
    >
      <draggable
        v-model="element.columns"
        :no-transition-on-drag="true"
        v-bind="{
          group: 'site',
          ghostClass: 'ghost',
          animation: 200,
          handle: '.mover',
        }"
        @add="handleContainerAdd($event)"
      >
        <transition-group
          name="fade"
          tag="div"
          v-drop-blank
          :class="[element.options.className ? element.options.className : '']"
          :style="style"
        >
          <widget
            v-for="(el, i) in element.columns"
            :element="el"
            :index="i"
            :key="el.key || Math.random() * 5"
            :data.sync="element.columns"
          ></widget>
        </transition-group>
      </draggable>
    </div>
  </drop-wrap>
</template>

<script>
import clone from 'clone'
import Draggable from 'vuedraggable'
export default {
  inject: ['model'],
  props: ['element', 'data', 'index'],
  data() {
    return {}
  },
  computed: {
    store() {
      return this.element.getRoot();
    },
    style() {
      let boxModel = {}
      Object.entries(this.element.boxModelStyle).map((item) => {
        boxModel[item[0]] = item[1] + 'px'
      })
      return {
        backgroundColor: this.element.options.backgroundColor,
        borderRadius: this.element.options.borderRadius + 'px',
        marginTop: this.element.options.marginTop + 'px',
        marginRight: this.element.options.marginRight + 'px',
        marginBottom: this.element.options.marginBottom + 'px',
        marginLeft: this.element.options.marginLeft + 'px',
        overflow: 'hidden',
        ...boxModel,
      }
    },
  },
  components: { Draggable },
  methods: {
    handleContainerAdd(evt) {
      console.log('add', evt)
      console.log('end', evt)
      const newIndex = evt.newIndex
      const to = evt.to
      console.log(to)

      console.log('需要删除的key', this.element.columns[newIndex].key)
      if (this.element.columns[newIndex].key) {
        this.store.delComponentMap(this.element.columns[newIndex])
      }
      this.$set(
        this.element.columns,
        newIndex,
        this.store.generateComponent({
          ...clone(this.element.columns[newIndex]),
        })
      )
      this.store.current = this.element.columns[newIndex]
      this.$handleStack.push(clone(this.store.root))
    },
  },
}
</script>

<style lang="scss" scoped>
.blank-container {
  min-height: 50px;
  padding: 10px 0px;
}

</style>
